<template>
  <div class="bidding">
    <div class="title-module">
      <div class="breadcrumb-link" style="font-family: OpenSans-CondensedBold; font-size: 20px; color: #FF5B00; font-weight: bold;">
        <span @click="fallBack" style="cursor: pointer;">{{$t('bidding.biddingTitle')}}</span>
        <i class="el-icon-arrow-right"></i>
        <span>{{$t('bidding.myCollection')}}</span>
      </div>
      <!--<h2>{{$t('bidding.myCollection')}}</h2>-->
      <!--<span @click="jumpBidding" class="returnBtn">{{$t('bidding.biddingTitle')}}</span>-->
    </div>
    <div class="select-module">
      <el-row>
        <el-col :span="6" :offset="0">
          <div class="child-module region-div" v-clickoutside="handleClickOutSide">
            <span>{{$t('bidding.region')}}</span>
            <el-input @click.native="handleShowTree" v-model="treeValue" :disabled="true" :placeholder="$t('bidding.regionPlease')">
              <i
                class="el-select__caret el-input__icon" :class="iconArrow"
                slot="suffix">
              </i>
            </el-input>
            <cbi-tree
              :class="{show: showTree}"
              :data="regionDatas"
              show-checkbox
              node-key="label"
              ref="tree"
              :placeholder="$t('bidding.placeholder2')"
              @check="getTreeState">
            </cbi-tree>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="child-module">
            <span>{{$t('bidding.type')}}</span>
            <el-select v-model="announcementValue" clearable multiple collapse-tags>
              <el-option
                v-for="item in announcementOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <!--<el-col :span="6" :offset="0">-->
          <!--<div class="child-module">-->
            <!--<span>{{$t('bidding.region')}}</span>-->
            <!--<el-cascader-->
              <!--expand-trigger="hover"-->
              <!--:options="regionOptions"-->
              <!--:show-all-levels="false"-->
              <!--v-model="regionValue"-->
              <!--:placeholder="$t('bidding.placeholder2')"-->
              <!--:clearable="true"-->
              <!--@change="handleChange">-->
            <!--</el-cascader>-->
          <!--</div>-->
        <!--</el-col>-->
        <el-col :span="10" :offset="0">
          <div class="child-module">
            <span>{{$t('bidding.time')}}</span>
            <el-date-picker
              v-model="timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :range-separator="$t('bidding.to')"
              :start-placeholder="$t('bidding.startTime')"
              :end-placeholder="$t('bidding.endTime')">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" @click="loadMyCollectDatas()">{{$t('bidding.filter')}}</el-button>
        </el-col>
      </el-row>
    </div>
    <collection-item :propsData="collectionItems" @refreshRegion="loadRegion"></collection-item>
    <div class="paging-module" v-if="collectionItems.length !== 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPageValue"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="showNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import CollectionItem from './components/collectionItem'
  import clickoutside from './clickoutside'
  import {getUsername} from '../../../utils/auth'
  import cbiTree from '../../../components/tree/src/tree.vue'

  export default {
    components: {
      CollectionItem,
      cbiTree
    },
    directives: {
      'clickoutside': clickoutside
    },
    data() {
      return {
        treeValue: '',
        showTree: false, //树形控件展示与否
        iconArrow: 'el-icon-arrow-down', //输入框尾部图标
        announcementValue: [], // 公告类型
        announcementOptions: [],
        regionValue: [], // 地区
        regionValueParams: [], // 拼接格式后的地区
        regionOptions: [],
        regionDatas: [],
        timeRange: [],
        level1Arr: [], // 省
        level2Arr: [], // 市
        level3Arr: [], // 县
        // 分页
        currentPageValue: 1,
        collectionItems: [],
        showNum: 10,
        totalCount: 0
      }
    },
    methods: {
      fallBack() {
        this.$router.go(-1)
      },
      jumpBidding() {
        this.$router.push({path:'BidOpportunity'})
      },
      // getTreeState(dataObj, state, have) {
      //   console.log(this.$refs.tree.getCheckedNodes())
      //   let currentStates = this.$refs.tree.getCheckedNodes()
      //   let arr = []
      //   if (currentStates .length) {
      //     arr = currentStates.map(item => {
      //       return item.label
      //     })
      //     this.regionValueParams = arr
      //     this.treeValue = arr.join()
      //   } else {
      //     this.treeValue = ''
      //     this.regionValueParams = []
      //   }
      // },
      getTreeState(dataObj, state, have) {
        let currentStates = this.$refs.tree.getCheckedNodes()
        this.level1Arr = []
        this.level2Arr = []
        this.level3Arr = []
        currentStates.forEach(item => {
          switch (item.level) {
            case 1:
              this.level1Arr.push(item.value)
              break
            case 2:
              this.level2Arr.push(item.value)
              break
            case 3:
              this.level3Arr.push(item.value)
              break
          }
        })

        let arr = []
        if (currentStates.length) {
          arr = currentStates.map(item => {
            return item.label
          })
          this.treeValue = arr.join()
        } else {
          this.treeValue = ''
          this.regionValueParams = []
        }
      },
      handleClickOutSide() {
        this.showTree = false
      },
      handleShowTree() {
        this.showTree = !this.showTree
        if(this.showTree){
          this.iconArrow = 'el-icon-arrow-up'
        }else{
          this.iconArrow = 'el-icon-arrow-down'
        }
      },
      handleSizeChange(params) {
        // console.log(params)
        this.showNum = params
        this.loadMyCollectDatas()
        window.scrollTo(0, 330)
      },
      handleCurrentChange(params) {
        // console.log(params)
        this.currentPageValue = params
        this.loadMyCollectDatas()
        window.scrollTo(0, 330)
      },
      handleChange() {},
      async loadMyCollectDatas() {
        let params = {
          page: this.currentPageValue,
          pageSize: this.showNum,
          username: getUsername(),
          status: this.announcementValue,
          countys: this.level3Arr,
          provinces: this.level1Arr,
          citys: this.level2Arr,
          publish_date: this.timeRange
        }
        let res = await this.axios.post('collectionBidding/selectMyCollection', params)
        let resData = res.data.data
        this.totalCount = resData.totle
        this.collectionItems = resData.data
      },
      // async loadMyCollectDatas(bulletin_type = this.announcementValue || null, area_name = this.regionValueParams || null, start_publish_time = this.timeRange[0] || null, end_publish_time = this.timeRange[1] || null) {
      //   let params = {
      //     bulletin_type,
      //     area_name,
      //     start_publish_time,
      //     end_publish_time,
      //     page_num: this.currentPageValue,
      //     page_size: this.showNum
      //   }
      //   let res = await this.axios.post('bidding/selectMyCollection', params)
      //   // let res = await this.axios.post('http://10.100.92.131:9090/bidding/selectMyCollection', params)
      //   let resData = res.data.data
      //   this.totalCount = resData.total_size
      //   this.collectionItems = resData.rows
      // },
      // 公告类型
      async loadAnnouncementOptions () {
        let res = await this.axios.post('collectionBidding/selectBulletin_type', {
          username: getUsername()
        })
        // let res = await this.axios.post('bidding/selectBulletin_type', {})
        let resData = res.data.data
        this.announcementOptions = resData.map(item => {
          return {
            value: item,
            label: item,
          }
        })
      },
      // 地区
      async loadRegion () {
        // let res = await this.axios.post('bidding/selectRegion', {})
        let res = await this.axios.post('collectionBidding/selectRegion', {
          username: getUsername()
        })
        let resData = res.data.data
        this.regionOptions = resData
        this.regionDatas = resData
        // 不用重新请求收藏结果数据；因为只是总数减1；
        this.totalCount -= 1
        // 此段代码解决收藏页在非1页时移除当前页后的noData问题
        if (this.totalCount % this.showNum  === 0) {
          this.currentPageValue -= 1
          if (this.currentPageValue !== 0) {
            this.loadMyCollectDatas()
          }
        }
      }
    },
    mounted() {
      this.loadMyCollectDatas()
      this.loadAnnouncementOptions()
      this.loadRegion()
    },
    watch: {
      // 监听时间选择器值变化；因为它清除后会为null,不是空数组。所以要把他变为空数组
      'timeRange': function (value) {
        if (value === null) {
          this.timeRange = []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bidding {
    padding: 15px 41px;
    .title-module {
      margin-bottom: 20px;
      h2 {
        margin: 0;
        padding: 0;
        display: inline-block;
        font-size: 20px;
        font-family: MicorsoftYaHei;
        color: #000;
      }
      .returnBtn{
        display: inline-block;
        margin-top: 7px;
        float: right;
        color: #0090e9;
        font-family: MicorsoftYaHei;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .select-module {
      background-color: #fff;
      height: 92px;
      margin-top: 20px;
      padding: 30px;
      box-shadow: 2px 2px 10px rgba(224, 226, 234, 0.6);
      border-radius: 6px;
      .child-module {
        /*display: inline-block;*/
        position: relative;
        .el-select, .el-cascader {
          /*width: 130px;*/
          width: 150px;
        }
        .el-tree {
          position: absolute;
          left: 50px;
          top: 50px;
          z-index: 2;
          width: 80%;
          height: 160px;
          overflow: auto;
          border: 1px solid #dfe4ed;
          border-radius: 4px;
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          display: none;
        }
        span {
          margin-right: 20px;
        }
      }
      .region-div {
        .el-input {
          width: 150px;
        }
      }
      .show {
        display: block!important;
      }
    }
    .paging-module {
      margin-top: 80px;
      text-align: center;
    }
  }
</style>
